<template>
  <div class="site-wrapper site-page--login">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      status-icon
      v-if="LoginFlag"
    >
      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="6" :offset="10"
            ><div class="grid-content bg-purple"></div
          ></el-col>
          <el-col :span="6" :offset="10"
            ><div class="grid-content bg-purple">
              <h3 class="login-title">管理员登录</h3>
            </div></el-col
          >
        </el-row>
      </el-form-item>

      <el-form-item prop="username">
        <el-col :span="6" :offset="8"
          ><div class="grid-content bg-purple">
            <el-input
              v-model="dataForm.username"
              placeholder="帐号"
            ></el-input></div
        ></el-col>
      </el-form-item>
      <el-form-item prop="password">
        <el-col :span="6" :offset="8"
          ><div class="grid-content bg-purple">
            <el-input
              v-model="dataForm.password"
              type="password"
              placeholder="密码"
            ></el-input></div
        ></el-col>
      </el-form-item>

      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="6" :offset="6"
            ><div class="grid-content bg-purple"></div
          ></el-col>
          <el-col :span="6" :offset="10"
            ><div class="grid-content bg-purple">
              <el-button
                class="login-btn-submit"
                type="primary"
                @click="dataFormSubmit()"
                >登录</el-button
              >
              <!-- login -->
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;还没有账号?<el-link
                type="primary"
                @click="dialogVisible = true"
                >点击注册</el-link
              >
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <!-- 注册的dialog -->
    <el-dialog title="用户注册" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="userForm"
        :rules="rules"
        ref="empForm"
        label-width="70px"
        class="demo-empForm"
      >
        <el-form-item label="姓名" prop="uname">
          <el-input v-model="userForm.uname" @blur="userCheck()"></el-input>
          <span v-bind:style="styleObject">{{ msg }}</span>
        </el-form-item>
        <el-form-item label="密码" prop="upassword">
          <el-input v-model="userForm.upassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pwdReg">
          <el-input v-model="userForm.pwdReg" type="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="uemail">
          <el-input v-model="userForm.uemail"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="uphone">
          <el-input v-model="userForm.uphone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser">确定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-form
      :model="dataForm"
      :rules="rules"
      ref="dataForm"
      status-icon
      v-if="!LoginFlag"
    >
      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="6" :offset="10"
            ><div class="grid-content bg-purple"></div
          ></el-col>
          <el-col :span="6" :offset="10"
            ><div class="grid-content bg-purple">
              <h3 class="login-title">验证码</h3>
            </div></el-col
          >
        </el-row>
      </el-form-item>

      <el-form-item prop="username">
        <el-col :span="6" :offset="8"
          ><div class="grid-content bg-purple">
            <verify @login="login"></verify></div
        ></el-col>
      </el-form-item>
      <el-form-item prop="password"> </el-form-item>

      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="6" :offset="6"
            ><div class="grid-content bg-purple"></div
          ></el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import VueRouter from "vue-router";
import router from "../../router";
import verify from "./verify.vue";

export default {
  data() {
    let passwordCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (this.userForm.pwdReg != this.userForm.upassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      msg: "",
      styleObject: {
        color: "red",
        fontSize: "10px",
      },
      dialogVisible: false,
      userForm: {},
      dataForm: {
        // username: "wl",
        // password: "123",
      },

      LoginFlag: true,
      dataRule: {
        username: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },

      rules: {
        uname: [{ required: true, message: "请输入姓名!", trigger: "blur" }],
        pwdReg: [{ validator: passwordCheck, trigger: "change" }],
        uemail: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur"],
          },
        ],
        uphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          // 这个只能验证手机号
          // { pattern:/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: "请输入合法手机号", trigger: "blur" }
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3-9]\d{9}))$/,
            message: "请输入正确的手机号!",
            trigger: "blur",
          },
        ],
      },
      captchaPath: "",
    };
  },

  methods: {
    //用户名校验
    userCheck() {
      if (this.userForm.uname != null) {
        this.http({
          url: "user/checkName/" + this.userForm.uname,
          method: "post",
        }).then(({ data }) => {
          if (data.code == 1) {
            this.msg = data.msg;
          } else {
            this.msg = "";
          }
        });
      }
    },
    //注册用户
    addUser() {
      this.http({
        url: "user/save/" + 8,
        method: "post",
        data: this.userForm,
      }).then(({ data }) => {
        if (data.code == 1) {
          this.$message({
            message: "注册成功!",
            type: "success",
          });
          this.dialogVisible = false;
          this.userForm = {};
        }
      });
    },
    login() {
      this.http({
        url: "/login",
        method: "post",
        data: this.dataForm,
      }).then(({ data }) => {
        if (data.code == 1) {
          //将得到的token存在浏览器本地
          console.log(data);
          localStorage.setItem("token", data.data.token);
          this.$router.push("/");
          this.$message({
            message: data.msg,
            type: "success",
          });
        } else {
          this.LoginFlag = !this.LoginFlag;
        }
      });
    },
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          //校验成功时切换为验证码页面
          this.LoginFlag = false;
        }
      });
    },
  },

  components: {
    //局部引入组件
    verify,
  },
};
</script>
